<template>
  <el-form :inline="true">
    <el-form-item label="账号状态">
      <el-select v-model="request.status" clearable>
        <el-option :value="1" label="可用"></el-option>
        <el-option :value="2" label="禁用"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="search">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="CirclePlus" @click="createMenu">新增菜单</el-button>
    </el-form-item>
  </el-form>
  <el-table height="calc(100% - 50px)" :data="list" row-key="id" border stripe v-loading="showLoading" element-loading-text="Loading...">
    <el-table-column prop="label" label="资源名称" width="220px"/>
    <el-table-column prop="name" label="资源标识"/>
    <el-table-column prop="url" label="资源链接"/>
    <el-table-column prop="description" label="资源描述"/>
    <el-table-column label="资源类型" width="110px">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.menuType===0">菜单资源</el-tag>
        <el-tag type="warning" v-if="scope.row.menuType===1">接口资源</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="图标" width="70px">
      <template #default="scope">
        <div v-if="scope.row.ico">
          <component :is="scope.row.ico" style="width: 20px;height: 20px;display: inline-block;"></component>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="70px"/>
    <el-table-column label="状态" width="80px">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.available===1">可用</el-tag>
        <el-tag type="danger" v-if="scope.row.available===2">禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #default="scope">
        <el-button type="danger" size="small" v-if="scope.row.available===1" @click="disableResource(scope.row)">禁用
        </el-button>
        <el-button type="success" size="small" v-if="scope.row.available===2" @click="enableResourceById(scope.row)">
          启用
        </el-button>
        <el-button type="warning" size="small" @click="editCurrentMenu(scope.row)">编辑</el-button>
        <el-button type="primary" size="small" @click="createSonMenu(scope.row)">新增下级菜单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <resource-info v-model="visible" :title="noticeMessage" v-if="visible"
                 :type="resourceInfoType" @save="saveResourceInfoSuccess" :parentId="parentId"
                 :resourceId="resourceId"></resource-info>
</template>

<script>
import { onMounted, ref } from 'vue'
import { post } from '@/utils/httpRequest'
import { disableResourceByIdUrl, enableResourceByIdUrl, selectAllResources } from '@/api/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import ResourceInfo from '@/views/resourceManage/components/resourceInfo'
import { convertListToTree, sort } from '@/utils/util'

export default {
  name: 'resourceManage',
  components: { ResourceInfo },
  setup () {
    const showLoading = ref(false)
    const noticeMessage = ref(null)
    const list = ref([])
    const resourceInfoType = ref(0)
    const resourceId = ref(0)
    const request = ref({
      status: null
    })
    const search = () => {
      getMenuListAsync()
    }
    const saveResourceInfoSuccess = async () => {
      ElMessage.success('保存资源信息成功')
      await getMenuListAsync()
    }
    const editCurrentMenu = (data) => {
      noticeMessage.value = `编辑【${data.label}】的菜单`
      resourceInfoType.value = 1
      parentId.value = 0
      resourceId.value = data.id
      visible.value = true
    }
    const parentId = ref(0)
    const visible = ref(false)
    // 新增同级菜单
    const createMenu = () => {
      noticeMessage.value = '新增菜单'
      resourceInfoType.value = 0
      parentId.value = 0
      visible.value = true
    }
    // 新增下级菜单
    const createSonMenu = (data) => {
      noticeMessage.value = `新增【${data.label}】的下级菜单`
      resourceInfoType.value = 3
      parentId.value = data.id
      visible.value = true
    }
    // 获取菜单列表
    const getMenuListAsync = async () => {
      showLoading.value = true
      const result = await post(selectAllResources, request.value)
      if (result.code === 200) {
        list.value = sort(convertListToTree(result.data, 'id', 'parentId'), 'sort', 'children', true)
      }
      showLoading.value = false
    }
    const disableResource = async (item) => {
      ElMessageBox.confirm('确定禁用该菜单？', '禁用菜单提示', {
        type: 'warning'
      }).then(async () => {
        const result = await post(disableResourceByIdUrl, { id: item.id })
        if (result.code === 200) {
          ElMessage.success('禁用成功')
          await getMenuListAsync()
        }
      })
    }
    const enableResourceById = async (item) => {
      const result = await post(enableResourceByIdUrl, { id: item.id })
      if (result.code === 200) {
        ElMessage.success('开启成功')
        await getMenuListAsync()
      }
    }
    onMounted(() => {
      getMenuListAsync()
    })
    return {
      search,
      request,
      showLoading,
      enableResourceById,
      disableResource,
      resourceId,
      editCurrentMenu,
      parentId,
      saveResourceInfoSuccess,
      resourceInfoType,
      list,
      visible,
      createSonMenu,
      createMenu,
      noticeMessage
    }
  }
}
</script>

<style scoped>
.cursor {
  cursor: pointer;
}
</style>
